<template>
  <Card :bordered="false" dis-hover class="ivu-mt">
      <!-- 相关操作 -->
      <div>
          <Button type="primary" class="bnt"  @click="onAdd">添加逛逛话题</Button>
      </div>
      <vxe-table
          :data="tableData"
          ref="xTable"
          class="ivu-mt"
          highlight-hover-row
          :loading="listLoading"
          header-row-class-name="false"
          row-id="id"
          :tree-config="{lazy: true, children: 'children',hasChild: 'children',reserve: true}"
          >
          <vxe-table-column field="topic_name" tree-node title="话题名称"  min-width="250" ></vxe-table-column>
          <vxe-table-column field="pic" title="图标" min-width="100">
              <template v-slot="{ row }">
                  <viewer>
                      <div class="tabBox_img">
                          <img v-lazy="row.pic?row.pic:moren">
                      </div>
                  </viewer>
              </template>
          </vxe-table-column>
          <vxe-table-column field="cate_name" tree-node title="上级分类"  min-width="250" >
            <template v-slot="{ row }">
              <span>{{ row.category && row.category.cate_name  }}</span>
              </template>
          </vxe-table-column>
          <vxe-table-column field="sort" title="排序" min-width="100" tooltip="true"></vxe-table-column>\
          <vxe-table-column field="count_use" title="文章数" min-width="100" tooltip="true"></vxe-table-column>
          <vxe-table-column field="is_show" title="是否显示" min-width="120">
              <template v-slot="{ row }">
                  <i-switch v-model="row.is_show" :value="row.is_show" :true-value="1" :false-value="0" @on-change="onchangeIsShow(row)" size="large">
                      <span slot="open">显示</span>
                      <span slot="close">隐藏</span>
                  </i-switch>
              </template>
          </vxe-table-column>
          <vxe-table-column field="is_hot" title="是否推荐" min-width="120">
              <template v-slot="{ row }">
                  <i-switch v-model="row.is_hot" :value="row.is_hot" :true-value="1" :false-value="0" @on-change="onchangeIsHot(row)" size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </template>
          </vxe-table-column>
          <vxe-table-column field="date" title="操作" width="250" align="left">
              <template v-slot="{ row, index }">
                  <a @click="onEdit(row.topic_id)">编辑</a>
                  <Divider type="vertical"/>
                  <a @click="del(row,'删除该话题',index)">删除</a>
              </template>
          </vxe-table-column>
      </vxe-table>
      <vxe-pager class="mt20" border size="medium" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']"
        :current-page="tableFrom.page"
        :page-size="tableFrom.limit"
        :total="total"
        @page-change="handlePageChange">
    </vxe-pager>
  </Card>
</template>

<script>
import {
  communityTopicListApi, communityTopicCreateApi, communityTopicUpdateApi, communityTopicDeleteApi, communityTopicStatusApi, communityTopicHotApi
} from '@/api/community'
export default {
  name: 'communityTopic',
  data() {
    return {
      moren: require("@/assets/images/bjt.png"),
      isChecked: false,
      listLoading: true,
      tableData: [],
      total:0,
      tableFrom: {
        page: 1,
        limit: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handlePageChange ({ currentPage, pageSize }) {
      this.tableFrom.page = currentPage
      this.tableFrom.limit = pageSize
      this.getList()
    },
    // 列表
    getList() {
      this.listLoading = true
      communityTopicListApi(this.tableFrom).then(res => {
        this.tableData = res.data.list
        this.total = res.data.count
        this.listLoading = false
      }).catch(res => {
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList()
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList()
    },
    // 添加
    onAdd() {
      this.$modalForm(communityTopicCreateApi()).then(() => this.getList())
    },
    // 编辑
    onEdit(id) {
      this.$modalForm(communityTopicUpdateApi(id)).then(() => this.getList())
    },
    del (row, tit, num) {
      let delfromData = {
          title: tit,
          num: num,
          url: `community/topic/${row.topic_id}`,
          method: 'DELETE',
          ids: ''
      };
      this.$modalSure(delfromData).then((res) => {
          this.$Message.success(res.msg);
          this.getList();
      }).catch(res => {
          this.$Message.error(res.msg);
      });
  },
    onchangeIsShow(row) {
      communityTopicStatusApi(row.topic_id, row.is_show).then(( res ) => {
        this.$Message.success(res.msg)
      }).catch(( res ) => {
        this.$Message.error(res.msg)
      })
    },
    onchangeIsHot(row) {
      communityTopicHotApi(row.topic_id, row.is_hot).then(( res ) => {
        this.$Message.success(res.msg)
      }).catch(({ res }) => {
        this.$Message.error(res.msg)
      })
    },
  }
}
</script>
<style scoped lang="stylus">
    .treeSel >>>.ivu-select-dropdown-list
        padding 0 10px!important
        box-sizing border-box
    .tabBox_img
        width 36px
        height 36px
        border-radius:4px
        cursor pointer
        img
            width 100%
            height 100%
    /deep/.ivu-input
        font-size 14px !important
</style>
